<template>
	<view class="dropdown"> 
		<!-- 人员列表 --> 
		<view class="select-list" v-if="type==1">
			<view class="select" @click="onSelect(i)" v-for="(item,i) in choseList1" :key="i">
				<text :class="choseNum==i?'actived':''" v-if="i==2 && choseNum==i">{{intellectName || '智能筛选'}}</text>
				<text :class="choseNum==i?'actived':''" v-else>{{item.name}}</text>
				<template v-if="item.isMore">
					<image v-if="choseNum==i && (select1 || select2)" src="../static/appointment/moreup.png" mode="widthFix" style="width: 32rpx;height: 32rpx;"></image>
					<image v-else src="../static/appointment/moredowm.png" mode="widthFix" style="width: 32rpx;height: 32rpx;"></image>
				</template>
				
			</view>
		</view>
		<!-- 商户列表 -->
		<view class="select-list" v-if="type==2">
			<view class="select" @click="onSelect(i,item.id)" v-for="(item,i) in choseList2" :key="i">
				<text :class="choseNum==i?'actived':''" v-if="i==2 && choseNum==i">{{intellectName || '智能筛选'}}</text>
				<text :class="choseNum==i?'actived':''" v-else>{{item.name}}</text>
				<template v-if="item.isMore">
					<image v-if="choseNum==i && (select1 || select2)" src="../static/appointment/moreup.png" mode="widthFix" style="width: 32rpx;height: 32rpx;"></image>
					<image v-else src="../static/appointment/moredowm.png" mode="widthFix" style="width: 32rpx;height: 32rpx;"></image>
				</template>
			</view>
		</view>
		<!-- 产品列表 -->
		<view class="select-list" v-if="type==3">
			<view class="select" @click="onSelectGoods(i,item.id)" v-for="(item,i) in choseList3" :key="i">
				<text :class="choseNum==i?'actived':''" v-if="i==2 && choseNum==i">{{intellectName || '智能筛选'}}</text>
				<text :class="choseNum==i?'actived':''" v-else>{{item.name}}</text>
			</view>
		</view>
		<view class="downbox" v-if="select1">
			<scroll-view class="scroll-view" scroll-y scroll-with-animation
			 :scroll-top="0" @refresherpulling="refreshList">
				<view v-for="(item,index) in categoryList" :key="item.id" class="list">
					<view class="list-title">{{item.name}}</view>
					<view class="list-titleName" v-if="item.childs">
						<view v-for="(it,i) in item.childs" :key="i" :class="categoryIdList.includes(it.id) ? 'active' : ''" 
						@click="chose(it.id)">
							{{it.name}}
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="btn">
				<view @click="handleClear"> 重 置 </view>
				<view @click="handleSearch" style="background-color: #277EEF;color: #fff;"> 确 定 </view>
			</view>
		</view>
		<view class="downbox" v-if="select2">
			<view v-for="(item,index) in intellectList1" :key="item.id" class="list2" @click="choseIntellect(item)">
				<view class="list-title">{{item.name}}</view> 
			</view> 
		</view>
	</view>	
</template>

<script>
	import {categoryListsAPI,categoryOneListAPI} from "@/api/appointment.js"
	export default {
		name:"woods-dropdown",
		props:{
			// 1.人员列表 2.商户列表 3.产品列表
			dropdownType:{
				default:3,
				type:Number
			}
		},
		data() {
			return {
				choseList1:[
					{name:"工种筛选",isMore:true},{name:"最早可约",isMore:false},
					{name:"智能筛选",isMore:true},{name:"服务过",isMore:false}
				],
				choseList2:[
					{name:"工种筛选",isMore:true},{name:"营业时间",isMore:false},
					{name:"智能筛选",isMore:true},{name:"服务过",isMore:false}
				],
				choseList3:[
					{name:"保洁服务",isMore:false},{name:"工程服务",isMore:false},
					{name:"陪护服务",isMore:false},{name:"推荐套餐",isMore:false}
				],
				 
				intellectList1:[
					{name:"总接单量",id:'1'},{name:"粉丝量",id:'2'},
					{name:"优惠券",id:'3'},{name:"自带工具",id:'4'}, {name:"培训认证",id:'5'} 
				],
				intellectList2:[
					{name:"总接单量",id:'1'},{name:"粉丝量",id:'2'},
					{name:"优惠券",id:'3'},{name:"本月之星",id:'4'}, {name:"认证",id:'5'} 
				],
				type:1,//人员/商户/商品
				choseNum:-1,//第几个小项筛选 工总、最早可约、智能筛选、服务过
				select1:false,
				select2:false,
				categoryList:[],
				categoryIdList:[],
				intellectName:"智能筛选"
				
			} 
		},
		created() {
			this.getcategoryList()
			this.categoryOneList()
		},
		watch:{
			dropdownType(type){
				this.type=type
				this.choseNum=0
				this.select1=false
			}
		},
		methods: {
			handleClear(){
				
				this.select1=false
				this.categoryIdList=[]
				this.$emit('handleSearch',this.choseNum,this.categoryIdList)
				this.choseNum=-1
			},
			categoryOneList(){
				categoryOneListAPI().then(res=>{
					this.choseList3=res
				})
			},
			choseIntellect(item){
				this.select2=false
				this.intellectName=item.name
				this.$emit('handleSearch',this.choseNum,item.id)
			},
			handleSearch(){
				this.select1=false
				this.$emit('handleSearch',this.choseNum,this.categoryIdList)
			},
			handclear(){
				this.categoryIdList=[]
				
				this.select1=false
				this.$emit('handleSearch',this.choseNum,undefined)
			},
			chose(id){
				const index = this.categoryIdList.indexOf(id);
				if (index === -1) {
					this.categoryIdList.push(id);
				} else {
					this.categoryIdList.splice(index, 1);
				}
			},
			getcategoryList(){
				categoryListsAPI().then(res=>{
					this.categoryList=res.data
				})
			},
			onSelect(n) {
				this.choseNum=n
			 
				 switch (n){
				 	case 0:
						this.select1=!this.select1
						this.select2=false
						 
				 		break;
					case 1:
						 this.$emit('handleSearch',this.choseNum,6)
						 this.select1=false
						 this.select2=false
						break;
					case 2:
						this.select2=!this.select2
						this.select1=false
						break;
					case 3:
						 this.$emit('handleSearch',this.choseNum,7)
						 this.select1=false
						 this.select2=false
						break;
				 	default:
				 		break;
				 }
				 if(n!=2){
					 this.intellectName="智能筛选"
				 }
				
			},
			onSelectGoods(i,id){
				this.choseNum=i
				this.$emit('handleSearch',this.choseNum,id)
			}
		}
		
	}
</script>

<style scoped lang="scss">
.dropdown{
	position: relative;
	background-color: #fff;
}
.select-list{
	height: 100rpx;
	// background-color: red;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20rpx;
	.select{
		display: flex;
		align-items: center;
		text{
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
			line-height: 33rpx;
			text-align: center;
		}
		.actived{
			color: #277EEF;
		}
	}
}
.downbox{
	position: absolute;
	top: 50px;
	left: 0;
	width: 100%;
	background-color: #fff;
	border-radius: 0rpx 0rpx 20rpx 20rpx;
	min-height: 300rpx;
	padding: 20rpx;
	z-index: 99;
	.list{
		.list-title{
			margin-top: 20rpx;
			font-weight: bold;
			font-size: 28rpx;
			color: #333333;
			line-height: 33rpx;
		}
		.list-titleName{
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			
			view{
				padding: 12rpx 20rpx;
				font-size: 24rpx;
				color: #666666;
				line-height: 28rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				background-color: #F8F8F8;
				border-radius: 36rpx;
				margin: 15rpx 20rpx;
			}
			.active{
				background-color: #EEF5FF;
				color: #277EEF;
			}
		}
	}
	.list2{
		.list-title{
			padding: 15rpx;
			font-size: 28rpx;
			color: #333333;
			line-height: 40rpx;
		}
	}
	.btn{
		display: flex;
		justify-content: center;
		margin-top: 20rpx;
		view{
			flex: 1;
			padding: 15rpx;
			 
			border: 2rpx solid #277EEF;
			border-radius: 40rpx; 
			font-size: 36rpx;
			color: #277EEF;
			line-height: 42rpx;
			text-align: center; 
			margin: 20rpx;
		}
	}
}
.scroll-view {
	 
	height: 500rpx;
	 
	box-sizing: border-box;
}

</style>